<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 7 Advanced | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.19 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 7 Advanced | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="yihui/bookdown-crc" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 7 Advanced | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2020-06-05" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="external-library-1.html"/>
<link rel="next" href="references.html"/>
<script src="libs/header-attrs/header-attrs.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<link href="libs/gitbook/css/style.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/plotly-binding/plotly.js"></script>
<script src="libs/typedarray/typedarray.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main/plotly-latest.min.js"></script>
<script src="libs/core-js/shim.min.js"></script>
<script src="libs/react/react.min.js"></script>
<script src="libs/react/react-dom.min.js"></script>
<script src="libs/reactwidget/react-tools.js"></script>
<script src="libs/reactable-binding/reactable.js"></script>
<script src="libs/r2d3-render/r2d3-render.js"></script>
<script src="libs/webcomponents/webcomponents.js"></script>
<script src="libs/r2d3-binding/r2d3.js"></script>
<script src="libs/d3v5/d3.min.js"></script>


<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">R and JavaScript</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a>
<ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#disclaimer"><i class="fa fa-check"></i>Disclaimer</a></li>
</ul></li>
<li class="part"><span><b>I Basics &amp; Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="introduction.html"><a href="introduction.html"><i class="fa fa-check"></i><b>1</b> Introduction</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#rationale"><i class="fa fa-check"></i>Rationale</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#prerequisites"><i class="fa fa-check"></i>Prerequisites</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#package-development"><i class="fa fa-check"></i>Package Development</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#json"><i class="fa fa-check"></i>JSON</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#javascript"><i class="fa fa-check"></i>JavaScript</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#methods"><i class="fa fa-check"></i>Methods</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#v8"><i class="fa fa-check"></i>V8</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#htmlwidgets"><i class="fa fa-check"></i>htmlwidgets</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#shiny"><i class="fa fa-check"></i>Shiny</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#reactr"><i class="fa fa-check"></i>reactR</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#bubble"><i class="fa fa-check"></i>bubble</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#r2d3"><i class="fa fa-check"></i>r2d3</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II JavaScript for Computations</b></span></li>
<li class="chapter" data-level="2" data-path="the-v8-engine.html"><a href="the-v8-engine.html"><i class="fa fa-check"></i><b>2</b> The V8 Engine</a>
<ul>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#installation"><i class="fa fa-check"></i>Installation</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#basics"><i class="fa fa-check"></i>Basics</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#external-libraries"><i class="fa fa-check"></i>External Libraries</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#with-npm"><i class="fa fa-check"></i>With Npm</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#use-in-packages"><i class="fa fa-check"></i>Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="node.html"><a href="node.html"><i class="fa fa-check"></i><b>3</b> Node.js with Bubble</a>
<ul>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#basics-1"><i class="fa fa-check"></i>Basics</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#r-markdown-engine"><i class="fa fa-check"></i>R Markdown Engine</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#npm"><i class="fa fa-check"></i>Npm</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#use-in-packages-1"><i class="fa fa-check"></i>Use in Packages</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="4" data-path="a-two-way-street.html"><a href="a-two-way-street.html"><i class="fa fa-check"></i><b>4</b> A Two-way Street</a>
<ul>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#static-files"><i class="fa fa-check"></i>Static Files</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#integration"><i class="fa fa-check"></i>Integration</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#from-r-to-javascript"><i class="fa fa-check"></i>From R to JavaScript</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#from-javascript-to-r"><i class="fa fa-check"></i>From JavaScript to R</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#external-library"><i class="fa fa-check"></i>External Library</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#serialisation"><i class="fa fa-check"></i>Serialisation</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#events-callbacks"><i class="fa fa-check"></i>Events &amp; Callbacks</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#as-a-package"><i class="fa fa-check"></i>As a Package</a>
<ul>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#dependencies"><i class="fa fa-check"></i>Dependencies</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#r-code"><i class="fa fa-check"></i>R Code</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#javascript-code"><i class="fa fa-check"></i>JavaScript Code</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#shortcoming"><i class="fa fa-check"></i>Shortcoming</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#input"><i class="fa fa-check"></i>Input</a></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#wrapping-up"><i class="fa fa-check"></i>Wrapping up</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="a-two-way-street.html"><a href="a-two-way-street.html#exercises"><i class="fa fa-check"></i>Exercises</a></li>
</ul></li>
<li class="part"><span><b>IV HTML Widgets Visualisation</b></span></li>
<li class="chapter" data-level="5" data-path="basic-widget.html"><a href="basic-widget.html"><i class="fa fa-check"></i><b>5</b> Basic Widget</a>
<ul>
<li class="chapter" data-level="" data-path="basic-widget.html"><a href="basic-widget.html#candidate-libraries"><i class="fa fa-check"></i>Candidate Libraries</a>
<ul>
<li class="chapter" data-level="" data-path="basic-widget.html"><a href="basic-widget.html#plotly"><i class="fa fa-check"></i>Plotly</a></li>
<li class="chapter" data-level="" data-path="basic-widget.html"><a href="basic-widget.html#highchart.js"><i class="fa fa-check"></i>Highchart.js</a></li>
<li class="chapter" data-level="" data-path="basic-widget.html"><a href="basic-widget.html#chart.js"><i class="fa fa-check"></i>Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="basic-widget.html"><a href="basic-widget.html#how-it-works"><i class="fa fa-check"></i>How it works</a></li>
<li class="chapter" data-level="" data-path="basic-widget.html"><a href="basic-widget.html#the-scaffold"><i class="fa fa-check"></i>The Scaffold</a></li>
<li class="chapter" data-level="" data-path="basic-widget.html"><a href="basic-widget.html#the-output"><i class="fa fa-check"></i>The Output</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="external-library-1.html"><a href="external-library-1.html"><i class="fa fa-check"></i><b>6</b> External Library</a>
<ul>
<li class="chapter" data-level="" data-path="external-library-1.html"><a href="external-library-1.html#dependency"><i class="fa fa-check"></i>Dependency</a></li>
<li class="chapter" data-level="" data-path="external-library-1.html"><a href="external-library-1.html#javascript-1"><i class="fa fa-check"></i>JavaScript</a></li>
<li class="chapter" data-level="" data-path="external-library-1.html"><a href="external-library-1.html#html-element"><i class="fa fa-check"></i>HTML Element</a></li>
<li class="chapter" data-level="" data-path="external-library-1.html"><a href="external-library-1.html#exercises-1"><i class="fa fa-check"></i>Exercises</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="advanced.html"><a href="advanced.html"><i class="fa fa-check"></i><b>7</b> Advanced</a>
<ul>
<li class="chapter" data-level="" data-path="advanced.html"><a href="advanced.html#dependencies-1"><i class="fa fa-check"></i>Dependencies</a></li>
<li class="chapter" data-level="" data-path="advanced.html"><a href="advanced.html#javascript-2"><i class="fa fa-check"></i>JavaScript</a></li>
<li class="chapter" data-level="" data-path="advanced.html"><a href="advanced.html#working-with-data"><i class="fa fa-check"></i>Working with Data</a></li>
<li class="chapter" data-level="" data-path="advanced.html"><a href="advanced.html#transforming-data"><i class="fa fa-check"></i>Transforming Data</a>
<ul>
<li class="chapter" data-level="" data-path="advanced.html"><a href="advanced.html#in-javascript"><i class="fa fa-check"></i>In JavaScript</a></li>
<li class="chapter" data-level="" data-path="advanced.html"><a href="advanced.html#in-r"><i class="fa fa-check"></i>In R</a></li>
<li class="chapter" data-level="" data-path="advanced.html"><a href="advanced.html#pros-cons"><i class="fa fa-check"></i>Pros &amp; Cons</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="advanced.html"><a href="advanced.html#on-print"><i class="fa fa-check"></i>On Print</a></li>
<li class="chapter" data-level="" data-path="advanced.html"><a href="advanced.html#javascript-functions"><i class="fa fa-check"></i>JavaScript Functions</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="advanced" class="section level1" number="7">
<h1><span class="header-section-number">Chapter 7</span> Advanced</h1>
<p>With a first widget built one can jump onto another one: <a href="https://giojs.org/">gio.js</a>, a library to draw arcs between countries on a 3 dimensional globe. This will include many more functionalities such packages can comprise.</p>
<div class="figure">
<img src="images/gio-example.png" alt="" />
<p class="caption">Example of Gio.js visualisation</p>
</div>
<p>Then again, the first order of business when looking to integrate a library is to look at the documentation to understand what is should be reproduced in R.</p>
<div class="sourceCode" id="cb204"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb204-1"><a href="advanced.html#cb204-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb204-2"><a href="advanced.html#cb204-2"></a><span class="kw">&lt;html</span><span class="ot"> xmlns=</span><span class="st">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="ot"> lang=</span><span class="st">&quot;&quot;</span><span class="ot"> xml:lang=</span><span class="st">&quot;&quot;</span><span class="kw">&gt;</span></span>
<span id="cb204-3"><a href="advanced.html#cb204-3"></a></span>
<span id="cb204-4"><a href="advanced.html#cb204-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb204-5"><a href="advanced.html#cb204-5"></a>  <span class="co">&lt;!-- Import libraries --&gt;</span></span>
<span id="cb204-6"><a href="advanced.html#cb204-6"></a>  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;three.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb204-7"><a href="advanced.html#cb204-7"></a>  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;gio.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb204-8"><a href="advanced.html#cb204-8"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb204-9"><a href="advanced.html#cb204-9"></a></span>
<span id="cb204-10"><a href="advanced.html#cb204-10"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb204-11"><a href="advanced.html#cb204-11"></a>  <span class="co">&lt;!-- div to hold visualisation --&gt;</span></span>
<span id="cb204-12"><a href="advanced.html#cb204-12"></a>  <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;globe&quot;</span><span class="ot"> style=</span><span class="st">&quot;width: 200px; height: 200px&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></span>
<span id="cb204-13"><a href="advanced.html#cb204-13"></a></span>
<span id="cb204-14"><a href="advanced.html#cb204-14"></a>  <span class="co">&lt;!-- Script to create visualsiation --&gt;</span></span>
<span id="cb204-15"><a href="advanced.html#cb204-15"></a>  <span class="kw">&lt;script&gt;</span></span>
<span id="cb204-16"><a href="advanced.html#cb204-16"></a>    <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;globe&quot;</span>)<span class="op">;</span></span>
<span id="cb204-17"><a href="advanced.html#cb204-17"></a>    <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb204-18"><a href="advanced.html#cb204-18"></a>    <span class="va">controller</span>.<span class="at">addData</span>(data)<span class="op">;</span></span>
<span id="cb204-19"><a href="advanced.html#cb204-19"></a>    <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb204-20"><a href="advanced.html#cb204-20"></a>  <span class="kw">&lt;/script&gt;</span></span>
<span id="cb204-21"><a href="advanced.html#cb204-21"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb204-22"><a href="advanced.html#cb204-22"></a></span>
<span id="cb204-23"><a href="advanced.html#cb204-23"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>Gio.js has itself a dependency, <a href="https://threejs.org/">three.js</a>, which needs to be imported before gio.js, other than that not much differs from libraries previously explored in this chapter.</p>
<div class="sourceCode" id="cb205"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb205-1"><a href="advanced.html#cb205-1"></a>usethis<span class="op">::</span><span class="kw">create_package</span>(<span class="st">&quot;gio&quot;</span>)</span>
<span id="cb205-2"><a href="advanced.html#cb205-2"></a>htmlwidgets<span class="op">::</span><span class="kw">scaffoldWidget</span>(<span class="st">&quot;gio&quot;</span>)</span></code></pre></div>
<div id="dependencies-1" class="section level2 unnumbered" number="">
<h2>Dependencies</h2>
<p>Handling the dependencies does differ much, we only need to download two libraries instead of one.</p>
<div class="sourceCode" id="cb206"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb206-1"><a href="advanced.html#cb206-1"></a><span class="co"># create directories for JS dependencies</span></span>
<span id="cb206-2"><a href="advanced.html#cb206-2"></a><span class="kw">dir.create</span>(<span class="st">&quot;./inst/htmlwidgets/three&quot;</span>, <span class="dt">recursive =</span> <span class="ot">TRUE</span>)</span>
<span id="cb206-3"><a href="advanced.html#cb206-3"></a><span class="kw">dir.create</span>(<span class="st">&quot;./inst/htmlwidgets/gio&quot;</span>, <span class="dt">recursive =</span> <span class="ot">TRUE</span>)</span>
<span id="cb206-4"><a href="advanced.html#cb206-4"></a></span>
<span id="cb206-5"><a href="advanced.html#cb206-5"></a><span class="co"># download JS dependencies</span></span>
<span id="cb206-6"><a href="advanced.html#cb206-6"></a>three &lt;-<span class="st"> &quot;https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js&quot;</span></span>
<span id="cb206-7"><a href="advanced.html#cb206-7"></a>gio &lt;-<span class="st"> &quot;https://raw.githubusercontent.com/syt123450/giojs/master/build/gio.min.js&quot;</span></span>
<span id="cb206-8"><a href="advanced.html#cb206-8"></a></span>
<span id="cb206-9"><a href="advanced.html#cb206-9"></a><span class="kw">download.file</span>(three, <span class="st">&quot;./inst/htmlwidgets/three/three.min.js&quot;</span>)</span>
<span id="cb206-10"><a href="advanced.html#cb206-10"></a><span class="kw">download.file</span>(gio, <span class="st">&quot;./inst/htmlwidgets/gio/gio.min.js&quot;</span>)</span></code></pre></div>
<p>This should produce the following working directory.</p>
<pre><code>.
├── DESCRIPTION
├── NAMESPACE
├── R
│   └── gio.R
└── inst
    └── htmlwidgets
        ├── gio
        │   └── gio.min.js
        ├── gio.js
        ├── gio.yaml
        └── three
            └── three.min.js</code></pre>
<p>The libraries have been downloaded but the <code>gio.yml</code> file is yet to be edited. The order in which the libraries are listed matters; just as in HTML three.js needs to precede gio.js as the former depends on the latter and not vice versa.</p>
<div class="sourceCode" id="cb208"><pre class="sourceCode yml"><code class="sourceCode yaml"><span id="cb208-1"><a href="advanced.html#cb208-1"></a><span class="fu">dependencies</span><span class="kw">:</span></span>
<span id="cb208-2"><a href="advanced.html#cb208-2"></a><span class="at">  </span><span class="kw">-</span><span class="at"> </span><span class="fu">name</span><span class="kw">:</span><span class="at"> three</span></span>
<span id="cb208-3"><a href="advanced.html#cb208-3"></a><span class="at">    </span><span class="fu">version</span><span class="kw">:</span><span class="at"> </span><span class="dv">110</span></span>
<span id="cb208-4"><a href="advanced.html#cb208-4"></a><span class="at">    </span><span class="fu">src</span><span class="kw">:</span><span class="at"> htmlwidgets/three</span></span>
<span id="cb208-5"><a href="advanced.html#cb208-5"></a><span class="at">    </span><span class="fu">script</span><span class="kw">:</span><span class="at"> three.min.js</span></span>
<span id="cb208-6"><a href="advanced.html#cb208-6"></a><span class="at">  </span><span class="kw">-</span><span class="at"> </span><span class="fu">name</span><span class="kw">:</span><span class="at"> gio</span></span>
<span id="cb208-7"><a href="advanced.html#cb208-7"></a><span class="at">    </span><span class="fu">version</span><span class="kw">:</span><span class="at"> </span><span class="fl">2.0</span></span>
<span id="cb208-8"><a href="advanced.html#cb208-8"></a><span class="at">    </span><span class="fu">src</span><span class="kw">:</span><span class="at"> htmlwidgets/gio</span></span>
<span id="cb208-9"><a href="advanced.html#cb208-9"></a><span class="at">    </span><span class="fu">script</span><span class="kw">:</span><span class="at"> gio.min.js</span></span></code></pre></div>
</div>
<div id="javascript-2" class="section level2 unnumbered" number="">
<h2>JavaScript</h2>
<p>Let’s copy the JavaScript code from the <a href="https://giojs.org/index.html">Get Started section of gio.js</a> in the <code>gio.js</code> file’s <code>renderValue</code> function. At this point the data format is not known so we comment the line which adds data to the visualisation.</p>
<div class="sourceCode" id="cb209"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb209-1"><a href="advanced.html#cb209-1"></a>...</span>
<span id="cb209-2"><a href="advanced.html#cb209-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></span>
<span id="cb209-3"><a href="advanced.html#cb209-3"></a></span>
<span id="cb209-4"><a href="advanced.html#cb209-4"></a>  <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;globe&quot;</span>)<span class="op">;</span></span>
<span id="cb209-5"><a href="advanced.html#cb209-5"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb209-6"><a href="advanced.html#cb209-6"></a>  <span class="co">//controller.addData(data);</span></span>
<span id="cb209-7"><a href="advanced.html#cb209-7"></a>  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb209-8"><a href="advanced.html#cb209-8"></a></span>
<span id="cb209-9"><a href="advanced.html#cb209-9"></a><span class="op">}</span></span>
<span id="cb209-10"><a href="advanced.html#cb209-10"></a>...</span></code></pre></div>
<p>One can document and load the package build it likely will not work as the code above attempts to place the visualisation in a <code>div</code> with <code>id = "globe"</code>. As for the previously written widget, this needs to be changed to <code>el.id</code> so the visualisation can correctly render in the HTML element generated by the widget.</p>
<div class="sourceCode" id="cb210"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb210-1"><a href="advanced.html#cb210-1"></a>...</span>
<span id="cb210-2"><a href="advanced.html#cb210-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></span>
<span id="cb210-3"><a href="advanced.html#cb210-3"></a></span>
<span id="cb210-4"><a href="advanced.html#cb210-4"></a>  <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="va">el</span>.<span class="at">id</span>)<span class="op">;</span></span>
<span id="cb210-5"><a href="advanced.html#cb210-5"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb210-6"><a href="advanced.html#cb210-6"></a>  <span class="co">//controller.addData(data);</span></span>
<span id="cb210-7"><a href="advanced.html#cb210-7"></a>  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb210-8"><a href="advanced.html#cb210-8"></a></span>
<span id="cb210-9"><a href="advanced.html#cb210-9"></a><span class="op">}</span></span>
<span id="cb210-10"><a href="advanced.html#cb210-10"></a>...</span></code></pre></div>
<p>At this stage the widget should generate a visualisation.</p>
<div class="sourceCode" id="cb211"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb211-1"><a href="advanced.html#cb211-1"></a>devtools<span class="op">::</span><span class="kw">document</span>()</span>
<span id="cb211-2"><a href="advanced.html#cb211-2"></a>devtools<span class="op">::</span><span class="kw">load_all</span>()</span>
<span id="cb211-3"><a href="advanced.html#cb211-3"></a><span class="kw">gio</span>(<span class="dt">message =</span> <span class="st">&quot;This required but not used&quot;</span>)</span></code></pre></div>
<div class="figure">
<img src="images/gio-init.png" alt="" />
<p class="caption">Output without data</p>
</div>
<p>Not too shabby!</p>
</div>
<div id="working-with-data" class="section level2 unnumbered" number="">
<h2>Working with Data</h2>
<p>An interesting start, now onto adding data. Let’s take a look at the <a href="https://giojs.org/html/docs/dataAdd.html">documentation</a> to see what data the library expects.</p>
<div class="sourceCode" id="cb212"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb212-1"><a href="advanced.html#cb212-1"></a><span class="ot">[</span></span>
<span id="cb212-2"><a href="advanced.html#cb212-2"></a>  <span class="fu">{</span></span>
<span id="cb212-3"><a href="advanced.html#cb212-3"></a>    <span class="dt">&quot;e&quot;</span><span class="fu">:</span> <span class="st">&quot;CN&quot;</span><span class="fu">,</span></span>
<span id="cb212-4"><a href="advanced.html#cb212-4"></a>    <span class="dt">&quot;i&quot;</span><span class="fu">:</span> <span class="st">&quot;US&quot;</span><span class="fu">,</span></span>
<span id="cb212-5"><a href="advanced.html#cb212-5"></a>    <span class="dt">&quot;v&quot;</span><span class="fu">:</span> <span class="dv">3300000</span></span>
<span id="cb212-6"><a href="advanced.html#cb212-6"></a>  <span class="fu">}</span><span class="ot">,</span></span>
<span id="cb212-7"><a href="advanced.html#cb212-7"></a>  <span class="fu">{</span></span>
<span id="cb212-8"><a href="advanced.html#cb212-8"></a>    <span class="dt">&quot;e&quot;</span><span class="fu">:</span> <span class="st">&quot;CN&quot;</span><span class="fu">,</span></span>
<span id="cb212-9"><a href="advanced.html#cb212-9"></a>    <span class="dt">&quot;i&quot;</span><span class="fu">:</span> <span class="st">&quot;RU&quot;</span><span class="fu">,</span></span>
<span id="cb212-10"><a href="advanced.html#cb212-10"></a>    <span class="dt">&quot;v&quot;</span><span class="fu">:</span> <span class="dv">10000</span></span>
<span id="cb212-11"><a href="advanced.html#cb212-11"></a>  <span class="fu">}</span></span>
<span id="cb212-12"><a href="advanced.html#cb212-12"></a><span class="ot">]</span></span></code></pre></div>
<p>The JSON data should constitutes of arrays that denote arcs to draw on the globe where each arc is defined by an exporting country (<code>e</code>), an importing country (<code>i</code>), and is given a value (<code>v</code>). The importing and exporting country, the source and target of the arc, are indicated by ISO alpha-2 country codes. We can read this JSON into R.</p>
<div class="sourceCode" id="cb213"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb213-1"><a href="advanced.html#cb213-1"></a><span class="co"># data.frame to test</span></span>
<span id="cb213-2"><a href="advanced.html#cb213-2"></a>arcs &lt;-<span class="st"> </span>jsonlite<span class="op">::</span><span class="kw">fromJSON</span>(</span>
<span id="cb213-3"><a href="advanced.html#cb213-3"></a>  <span class="st">&#39;[</span></span>
<span id="cb213-4"><a href="advanced.html#cb213-4"></a><span class="st">    {</span></span>
<span id="cb213-5"><a href="advanced.html#cb213-5"></a><span class="st">      &quot;e&quot;: &quot;CN&quot;,</span></span>
<span id="cb213-6"><a href="advanced.html#cb213-6"></a><span class="st">      &quot;i&quot;: &quot;US&quot;,</span></span>
<span id="cb213-7"><a href="advanced.html#cb213-7"></a><span class="st">      &quot;v&quot;: 3300000</span></span>
<span id="cb213-8"><a href="advanced.html#cb213-8"></a><span class="st">    },</span></span>
<span id="cb213-9"><a href="advanced.html#cb213-9"></a><span class="st">    {</span></span>
<span id="cb213-10"><a href="advanced.html#cb213-10"></a><span class="st">      &quot;e&quot;: &quot;CN&quot;,</span></span>
<span id="cb213-11"><a href="advanced.html#cb213-11"></a><span class="st">      &quot;i&quot;: &quot;RU&quot;,</span></span>
<span id="cb213-12"><a href="advanced.html#cb213-12"></a><span class="st">      &quot;v&quot;: 10000</span></span>
<span id="cb213-13"><a href="advanced.html#cb213-13"></a><span class="st">    }</span></span>
<span id="cb213-14"><a href="advanced.html#cb213-14"></a><span class="st">  ]&#39;</span></span>
<span id="cb213-15"><a href="advanced.html#cb213-15"></a>)</span>
<span id="cb213-16"><a href="advanced.html#cb213-16"></a></span>
<span id="cb213-17"><a href="advanced.html#cb213-17"></a><span class="kw">print</span>(arcs)</span></code></pre></div>
<pre><code>##    e  i       v
## 1 CN US 3300000
## 2 CN RU   10000</code></pre>
<p>Jsonlite automagically converts the JSON into a data frame where each row is an arc, which is great as R users tend to prefer rectangular data over lists: this probably what the package should use as input too. Let us make some changes to the <code>gio</code> function so it takes data as input.</p>
<div class="sourceCode" id="cb215"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb215-1"><a href="advanced.html#cb215-1"></a>gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</span>
<span id="cb215-2"><a href="advanced.html#cb215-2"></a></span>
<span id="cb215-3"><a href="advanced.html#cb215-3"></a>  <span class="co"># forward options using x</span></span>
<span id="cb215-4"><a href="advanced.html#cb215-4"></a>  x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb215-5"><a href="advanced.html#cb215-5"></a>    <span class="dt">data =</span> data</span>
<span id="cb215-6"><a href="advanced.html#cb215-6"></a>  )</span>
<span id="cb215-7"><a href="advanced.html#cb215-7"></a></span>
<span id="cb215-8"><a href="advanced.html#cb215-8"></a>  <span class="co"># create widget</span></span>
<span id="cb215-9"><a href="advanced.html#cb215-9"></a>  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb215-10"><a href="advanced.html#cb215-10"></a>    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb215-11"><a href="advanced.html#cb215-11"></a>    x,</span>
<span id="cb215-12"><a href="advanced.html#cb215-12"></a>    <span class="dt">width =</span> width,</span>
<span id="cb215-13"><a href="advanced.html#cb215-13"></a>    <span class="dt">height =</span> height,</span>
<span id="cb215-14"><a href="advanced.html#cb215-14"></a>    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb215-15"><a href="advanced.html#cb215-15"></a>    <span class="dt">elementId =</span> elementId</span>
<span id="cb215-16"><a href="advanced.html#cb215-16"></a>  )</span>
<span id="cb215-17"><a href="advanced.html#cb215-17"></a>}</span></code></pre></div>
<p>Then tiny changes to <code>play.js</code> where we uncomment the line that line previously commented and use <code>x.data</code> passed from R.</p>
<div class="sourceCode" id="cb216"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb216-1"><a href="advanced.html#cb216-1"></a>...</span>
<span id="cb216-2"><a href="advanced.html#cb216-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></span>
<span id="cb216-3"><a href="advanced.html#cb216-3"></a></span>
<span id="cb216-4"><a href="advanced.html#cb216-4"></a>  <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="va">el</span>.<span class="at">id</span>)<span class="op">;</span></span>
<span id="cb216-5"><a href="advanced.html#cb216-5"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb216-6"><a href="advanced.html#cb216-6"></a>  <span class="va">controller</span>.<span class="at">addData</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span> <span class="co">// uncomment &amp; use x.data</span></span>
<span id="cb216-7"><a href="advanced.html#cb216-7"></a>  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb216-8"><a href="advanced.html#cb216-8"></a></span>
<span id="cb216-9"><a href="advanced.html#cb216-9"></a><span class="op">}</span></span>
<span id="cb216-10"><a href="advanced.html#cb216-10"></a>...</span></code></pre></div>
<p>We can now use the function with the data to plot arcs!</p>
<div class="sourceCode" id="cb217"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb217-1"><a href="advanced.html#cb217-1"></a>devtools<span class="op">::</span><span class="kw">document</span>()</span>
<span id="cb217-2"><a href="advanced.html#cb217-2"></a>devtools<span class="op">::</span><span class="kw">load_all</span>()</span>
<span id="cb217-3"><a href="advanced.html#cb217-3"></a><span class="kw">gio</span>(arcs)</span></code></pre></div>
<p>Unfortunately, this breaks everything and we are presented with a blank screen. Using <code>console.log</code> or looking at the source code the rendered widget reveals the problem: the data isn’t actually in the correct format!</p>
<div class="sourceCode" id="cb218"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb218-1"><a href="advanced.html#cb218-1"></a><span class="fu">{</span><span class="dt">&quot;x&quot;</span><span class="fu">:{</span><span class="dt">&quot;data&quot;</span><span class="fu">:{</span><span class="dt">&quot;e&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="st">&quot;CN&quot;</span><span class="ot">,</span><span class="st">&quot;CN&quot;</span><span class="ot">]</span><span class="fu">,</span><span class="dt">&quot;i&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="st">&quot;US&quot;</span><span class="ot">,</span><span class="st">&quot;RU&quot;</span><span class="ot">]</span><span class="fu">,</span><span class="dt">&quot;v&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="dv">3300000</span><span class="ot">,</span><span class="dv">10000</span><span class="ot">]</span><span class="fu">}},</span><span class="dt">&quot;evals&quot;</span><span class="fu">:</span><span class="ot">[]</span><span class="fu">,</span><span class="dt">&quot;jsHooks&quot;</span><span class="fu">:</span><span class="ot">[]</span><span class="fu">}</span></span></code></pre></div>
<p>Htmlwidgets actually serialised the data frame column-wise (long) and not row-wise (wide).</p>
</div>
<div id="transforming-data" class="section level2 unnumbered" number="">
<h2>Transforming Data</h2>
<p>There are multiple ways to transform the data and ensure the serialised JSON is as the JavaScript expects it to be.</p>
<div id="in-javascript" class="section level3 unnumbered" number="">
<h3>In JavaScript</h3>
<p>One can use JavaScript to transform the data, leaving everything as-is R side to further handle the data JavaScript side. The HTMLwidget JavaScript library (already imported by default) exports an object which provides a method, <code>dataframeToD3</code>, to transform the data from long to wide.</p>
<div class="sourceCode" id="cb219"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb219-1"><a href="advanced.html#cb219-1"></a>...</span>
<span id="cb219-2"><a href="advanced.html#cb219-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></span>
<span id="cb219-3"><a href="advanced.html#cb219-3"></a></span>
<span id="cb219-4"><a href="advanced.html#cb219-4"></a>  <span class="co">// long to wide</span></span>
<span id="cb219-5"><a href="advanced.html#cb219-5"></a>  <span class="va">x</span>.<span class="at">data</span> <span class="op">=</span> <span class="va">HTMLWidgets</span>.<span class="at">dataframeToD3</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span></span>
<span id="cb219-6"><a href="advanced.html#cb219-6"></a></span>
<span id="cb219-7"><a href="advanced.html#cb219-7"></a>  <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="va">el</span>.<span class="at">id</span>)<span class="op">;</span></span>
<span id="cb219-8"><a href="advanced.html#cb219-8"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb219-9"><a href="advanced.html#cb219-9"></a>  <span class="va">controller</span>.<span class="at">addData</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span> </span>
<span id="cb219-10"><a href="advanced.html#cb219-10"></a>  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb219-11"><a href="advanced.html#cb219-11"></a></span>
<span id="cb219-12"><a href="advanced.html#cb219-12"></a><span class="op">}</span></span>
<span id="cb219-13"><a href="advanced.html#cb219-13"></a>...</span></code></pre></div>
</div>
<div id="in-r" class="section level3 unnumbered" number="">
<h3>In R</h3>
<p>Instead of serialising the data a certain way then correct in JavaScript as demonstrated previously, one can also modify, or even replace, htmlwidgets’ default serialiser. Speaking of which, below is the default serializer.</p>
<div class="sourceCode" id="cb220"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb220-1"><a href="advanced.html#cb220-1"></a><span class="cf">function</span> (x, ..., <span class="dt">dataframe =</span> <span class="st">&quot;columns&quot;</span>, <span class="dt">null =</span> <span class="st">&quot;null&quot;</span>, <span class="dt">na =</span> <span class="st">&quot;null&quot;</span>, </span>
<span id="cb220-2"><a href="advanced.html#cb220-2"></a>    <span class="dt">auto_unbox =</span> <span class="ot">TRUE</span>, <span class="dt">digits =</span> <span class="kw">getOption</span>(<span class="st">&quot;shiny.json.digits&quot;</span>, </span>
<span id="cb220-3"><a href="advanced.html#cb220-3"></a>        <span class="dv">16</span>), <span class="dt">use_signif =</span> <span class="ot">TRUE</span>, <span class="dt">force =</span> <span class="ot">TRUE</span>, <span class="dt">POSIXt =</span> <span class="st">&quot;ISO8601&quot;</span>, </span>
<span id="cb220-4"><a href="advanced.html#cb220-4"></a>    <span class="dt">UTC =</span> <span class="ot">TRUE</span>, <span class="dt">rownames =</span> <span class="ot">FALSE</span>, <span class="dt">keep_vec_names =</span> <span class="ot">TRUE</span>, <span class="dt">strict_atomic =</span> <span class="ot">TRUE</span>) </span>
<span id="cb220-5"><a href="advanced.html#cb220-5"></a>{</span>
<span id="cb220-6"><a href="advanced.html#cb220-6"></a>    <span class="cf">if</span> (strict_atomic) </span>
<span id="cb220-7"><a href="advanced.html#cb220-7"></a>        x &lt;-<span class="st"> </span><span class="kw">I</span>(x)</span>
<span id="cb220-8"><a href="advanced.html#cb220-8"></a>    jsonlite<span class="op">::</span><span class="kw">toJSON</span>(x, <span class="dt">dataframe =</span> dataframe, <span class="dt">null =</span> null, <span class="dt">na =</span> na, </span>
<span id="cb220-9"><a href="advanced.html#cb220-9"></a>        <span class="dt">auto_unbox =</span> auto_unbox, <span class="dt">digits =</span> digits, <span class="dt">use_signif =</span> use_signif, </span>
<span id="cb220-10"><a href="advanced.html#cb220-10"></a>        <span class="dt">force =</span> force, <span class="dt">POSIXt =</span> POSIXt, <span class="dt">UTC =</span> UTC, <span class="dt">rownames =</span> rownames, </span>
<span id="cb220-11"><a href="advanced.html#cb220-11"></a>        <span class="dt">keep_vec_names =</span> keep_vec_names, <span class="dt">json_verbatim =</span> <span class="ot">TRUE</span>, </span>
<span id="cb220-12"><a href="advanced.html#cb220-12"></a>        ...)</span>
<span id="cb220-13"><a href="advanced.html#cb220-13"></a>}</span></code></pre></div>
<p>The problem we face is caused by the <code>dataframe</code> argument which is set to <code>columns</code> whereas we need it set to <code>rows</code>. This can be done by passing the arguments to the serialiser is a list as <code>TOJSON_ARGS</code> attribute of the object <code>x</code> that is serialised. We could thus change the <code>gio</code> function to reflect the aforementioned change.</p>
<div class="sourceCode" id="cb221"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb221-1"><a href="advanced.html#cb221-1"></a>gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</span>
<span id="cb221-2"><a href="advanced.html#cb221-2"></a></span>
<span id="cb221-3"><a href="advanced.html#cb221-3"></a>  <span class="co"># forward options using x</span></span>
<span id="cb221-4"><a href="advanced.html#cb221-4"></a>  x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb221-5"><a href="advanced.html#cb221-5"></a>    <span class="dt">data =</span> data</span>
<span id="cb221-6"><a href="advanced.html#cb221-6"></a>  )</span>
<span id="cb221-7"><a href="advanced.html#cb221-7"></a></span>
<span id="cb221-8"><a href="advanced.html#cb221-8"></a>  <span class="co"># serialise data.frames to wide (not long as default)</span></span>
<span id="cb221-9"><a href="advanced.html#cb221-9"></a>  <span class="kw">attr</span>(x, <span class="st">&#39;TOJSON_ARGS&#39;</span>) &lt;-<span class="st"> </span><span class="kw">list</span>(<span class="dt">dataframe =</span> <span class="st">&quot;rows&quot;</span>)</span>
<span id="cb221-10"><a href="advanced.html#cb221-10"></a></span>
<span id="cb221-11"><a href="advanced.html#cb221-11"></a>  <span class="co"># create widget</span></span>
<span id="cb221-12"><a href="advanced.html#cb221-12"></a>  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb221-13"><a href="advanced.html#cb221-13"></a>    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb221-14"><a href="advanced.html#cb221-14"></a>    x,</span>
<span id="cb221-15"><a href="advanced.html#cb221-15"></a>    <span class="dt">width =</span> width,</span>
<span id="cb221-16"><a href="advanced.html#cb221-16"></a>    <span class="dt">height =</span> height,</span>
<span id="cb221-17"><a href="advanced.html#cb221-17"></a>    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb221-18"><a href="advanced.html#cb221-18"></a>    <span class="dt">elementId =</span> elementId</span>
<span id="cb221-19"><a href="advanced.html#cb221-19"></a>  )</span>
<span id="cb221-20"><a href="advanced.html#cb221-20"></a>}</span></code></pre></div>
<p>The above may seem confusing at first as one rarely encounters the <code>attr</code> replacement function.</p>
<div class="sourceCode" id="cb222"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb222-1"><a href="advanced.html#cb222-1"></a><span class="kw">attr</span>(cars, <span class="st">&quot;hello&quot;</span>) &lt;-<span class="st"> &quot;attributes&quot;</span> <span class="co"># set </span></span>
<span id="cb222-2"><a href="advanced.html#cb222-2"></a><span class="kw">attr</span>(cars, <span class="st">&quot;hello&quot;</span>) <span class="co"># get </span></span></code></pre></div>
<pre><code>## [1] &quot;attributes&quot;</code></pre>
<p>Otherwise one can completely override the serializer, also by setting an attribute, <code>TOJSON_FUNC</code>, to the function which should be used to serialise the data. Below the serialiser is changed to using jsonify <span class="citation">(Cooley <a href="#ref-R-jsonify" role="doc-biblioref">2020</a>)</span> which by default serialises data frames to wide, unlike htmlwidgets’ serialiser, thereby also fixing the issue.</p>
<div class="sourceCode" id="cb224"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb224-1"><a href="advanced.html#cb224-1"></a>gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</span>
<span id="cb224-2"><a href="advanced.html#cb224-2"></a></span>
<span id="cb224-3"><a href="advanced.html#cb224-3"></a>  <span class="co"># forward options using x</span></span>
<span id="cb224-4"><a href="advanced.html#cb224-4"></a>  x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb224-5"><a href="advanced.html#cb224-5"></a>    <span class="dt">data =</span> data</span>
<span id="cb224-6"><a href="advanced.html#cb224-6"></a>  )</span>
<span id="cb224-7"><a href="advanced.html#cb224-7"></a></span>
<span id="cb224-8"><a href="advanced.html#cb224-8"></a>  <span class="co"># replace serialiser</span></span>
<span id="cb224-9"><a href="advanced.html#cb224-9"></a>  <span class="kw">attr</span>(x, <span class="st">&#39;TOJSON_FUNC&#39;</span>) &lt;-<span class="st"> </span>gio_serialiser</span>
<span id="cb224-10"><a href="advanced.html#cb224-10"></a></span>
<span id="cb224-11"><a href="advanced.html#cb224-11"></a>  <span class="co"># create widget</span></span>
<span id="cb224-12"><a href="advanced.html#cb224-12"></a>  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb224-13"><a href="advanced.html#cb224-13"></a>    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb224-14"><a href="advanced.html#cb224-14"></a>    x,</span>
<span id="cb224-15"><a href="advanced.html#cb224-15"></a>    <span class="dt">width =</span> width,</span>
<span id="cb224-16"><a href="advanced.html#cb224-16"></a>    <span class="dt">height =</span> height,</span>
<span id="cb224-17"><a href="advanced.html#cb224-17"></a>    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb224-18"><a href="advanced.html#cb224-18"></a>    <span class="dt">elementId =</span> elementId</span>
<span id="cb224-19"><a href="advanced.html#cb224-19"></a>  )</span>
<span id="cb224-20"><a href="advanced.html#cb224-20"></a>}</span>
<span id="cb224-21"><a href="advanced.html#cb224-21"></a></span>
<span id="cb224-22"><a href="advanced.html#cb224-22"></a>gio_serialiser &lt;-<span class="st"> </span><span class="cf">function</span>(x){</span>
<span id="cb224-23"><a href="advanced.html#cb224-23"></a>  jsonify<span class="op">::</span><span class="kw">to_json</span>(x, <span class="dt">unbox =</span> <span class="ot">TRUE</span>)</span>
<span id="cb224-24"><a href="advanced.html#cb224-24"></a>}</span></code></pre></div>
<p>Alternatively, one can also leave all serialisers unchanged and instead format the data in R prior to the serialisation, changing the dataframe to a row-wise list.</p>
<div class="sourceCode" id="cb225"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb225-1"><a href="advanced.html#cb225-1"></a><span class="co"># forward options using x</span></span>
<span id="cb225-2"><a href="advanced.html#cb225-2"></a>x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb225-3"><a href="advanced.html#cb225-3"></a>  <span class="dt">data =</span> <span class="kw">apply</span>(data, <span class="dv">1</span>, as.list)</span>
<span id="cb225-4"><a href="advanced.html#cb225-4"></a>)</span></code></pre></div>
</div>
<div id="pros-cons" class="section level3 unnumbered" number="">
<h3>Pros &amp; Cons</h3>
<p>There are pros and cons to each methods. The preferable method is probably to change the arguments that cause issue, this is the method used in the remaining of the book. Replacing the serialiser in its entirety should not be necessary, only do this once you are very familiar with serialisation and truly see a need for it. Transforming the data in JavaScript has one drawback, <code>HTMLWidgets.dataframeToD3</code> cannot be applied to the entire <code>x</code> object but the subsets that hold the data frame which tends to lead to clunky code as one uses said function in various places and has to add if statements to make sure data is present, etc. This will become more evident as we progress.</p>
<div class="figure">
<img src="images/gio-data.png" alt="" />
<p class="caption">Gio output with correct serialisation</p>
</div>
</div>
</div>
<div id="on-print" class="section level2 unnumbered" number="">
<h2>On Print</h2>
<p>Let’s add the option to style the globe, gio.js provides <a href="https://giojs.org/html/docs/colorStyle.html">themes</a> but they are currently not applicable from R. As a matter of fact, gio.js provides dozens of customisation options that should be integrated into the package. These probably should be split across functions, just like they are in gio.js, rather than all grouped into a single function. This may first appear as difficult to implement, how, when, how would one use another function given the function <code>gio</code> generates the visualisation? The <code>gio</code> function creates everything needed for the visualisation to be generated but does not actually render anything, it returns an object of class “htmlwidget” which itself renders the visualisation on print (literally <code>htmlwidget.print</code> method).</p>
<div class="sourceCode" id="cb226"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb226-1"><a href="advanced.html#cb226-1"></a>g &lt;-<span class="st"> </span><span class="kw">gio</span>(arcs) <span class="co"># nothing renders</span></span>
<span id="cb226-2"><a href="advanced.html#cb226-2"></a>g <span class="co"># visualisation renders</span></span></code></pre></div>
<p>Therefore, one can use functions on the object returned by <code>gio</code> to further modify that object.</p>
</div>
<div id="javascript-functions" class="section level2 unnumbered" number="">
<h2>JavaScript Functions</h2>

</div>
</div>
<h3>References</h3>
<div id="refs" class="references">
<div id="ref-R-jsonify">
<p>Cooley, David. 2020. <em>Jsonify: Convert Between ’R’ Objects and Javascript Object Notation (Json)</em>.</p>
</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="external-library-1.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="references.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook/js/app.min.js"></script>
<script src="libs/gitbook/js/lunr.js"></script>
<script src="libs/gitbook/js/clipboard.min.js"></script>
<script src="libs/gitbook/js/plugin-search.js"></script>
<script src="libs/gitbook/js/plugin-sharing.js"></script>
<script src="libs/gitbook/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook/js/plugin-bookdown.js"></script>
<script src="libs/gitbook/js/jquery.highlight.js"></script>
<script src="libs/gitbook/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/r-and-javascript/edit/master/07-htmlwidgets-adv.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
